<template>
  <div class="app-container calendar-list-container">
    <!--待提交日报人员管理-->
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{ $t('management.dailyReportManagement.queryCriteria') }}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" style="padding: 10px 20px 0">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">{{ $t('management.dailyReportManagement.username') }}</div>
              <el-autocomplete clearable style="width: 100%" v-model="listQuery.value" :fetch-suggestions="getUserList" :placeholder="$t('management.dailyReportManagement.placeholder.content')" @select="setSales"></el-autocomplete>
            </div>
          </el-col>
          <el-col :span="4" style="margin-top: 23px">
            <div type="primary" class="yt-btn yt-btn-ys" @click="handleFilter">
              {{ $t('button.query') }}
            </div>
            <div type="primary" class="yt-btn yt-ml8" @click="reset">
              {{ $t('button.reset') }}
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="yt-data-list">
      <div class="yt-list-title">
        <span>{{ $t('management.dailyReportManagement.dailyReportManagement') }}</span>
      </div>
      <div class="yt-list-content">
        <div class="list-operation">
          <div class="yt-btn yt-btn-ys" type="primary" @click="handleTotal" >
            {{ $t('management.dailyReportManagement.oneButtonreset') }}
          </div>
          <div style="float: right">
            <el-date-picker
              style="margin-right: 10px"
              type="date"
              v-model="ignoreDates"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :editable="false"
              :placeholder="$t('management.dailyReportManagement.tips.selectDate')">
            </el-date-picker>
            <div class="yt-btn yt-btn-ys" type="danger" @click="ignoreUpdate">按天一键清零</div>
          </div>
          <!--<div class="yt-btn yt-ml8" type="danger" @click="handleUpdate">-->
          <!--保存-->
          <!--</div>-->
        </div>

        <el-table :data="list" :empty-text="$t('placeholder.emptyText')" border style="width: 100%;" class="yt-table" @selection-change="handleSelectionChange" v-loading.body="listLoading" max-height="600">
          <el-table-column type="selection" align="center" prop="id" width="60"/>
          <el-table-column type="index" align="center" :label="$t('management.dailyReportManagement.serialNumber')"/>
          <el-table-column align="center" :label="$t('management.dailyReportManagement.username')" prop="username"/>
          <el-table-column align="center" :label="$t('management.dailyReportManagement.name')" prop="name"/>
          <el-table-column align="center" :label="$t('management.dailyReportManagement.ename')" prop="ename"/>
          <el-table-column align="center" label="Account" prop="bu"/>
          <el-table-column align="center" label="Category" prop="bg"/>
          <el-table-column align="center" :label="$t('management.dailyReportManagement.stayCount')" prop="stayCount">
            <template slot-scope="scope">
              <span style="color: #0000ff" @click="update(scope.row)">{{ scope.row.stayCount }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.page"
            :page-sizes="[10, 20, 30, 50, 100, 200]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!--弹窗-->
    <el-dialog
      :title="$t('management.dailyReportManagement.dialogTitle')"
      :visible.sync="dialogVisible"
      class="yt-dialogForm-box"
    >
      <div style="padding: 20px">
        <el-row>
          <el-col :span="5" style="padding:0.8%">
            <div class="labelName">{{$t('management.dailyReportManagement.userNo')}} ：</div>
            <div class="labelName">{{ dialogForm.username }}</div>
          </el-col>
          <el-col :span="5" style="padding:0.8%">
            <div class="labelName">{{$t('management.dailyReportManagement.name')}}：</div>
            <div class="labelName">{{ dialogForm.name }}</div>
          </el-col>
        </el-row>
      </div>
      <el-table :data="dialogForm.dialogList" :empty-text="$t('placeholder.emptyText')" label-width="100px" class="yt-table">
        <el-table-column type="index" align="center" :label="$t('management.dailyReportManagement.serialNumber')"/>
        <el-table-column :label="$t('management.dailyReportManagement.dailyDate')" prop="dailyDate" align="center"/>
        <el-table-column :label="$t('management.dailyReportManagement.isIgnoreValue')" prop="name" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isIgnoreValue"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column :label="$t('management.dailyReportManagement.remark')" prop="remark" align="center"/>
      </el-table>
      <div class="pagination-container">
        <el-pagination @size-change="dialoghandleSizeChange"
        @current-change="dialoghandleCurrentChange"
        background
        :current-page.sync="obj.page"
        :page-sizes="[10, 20, 30, 50, 100, 200]"
        :page-size="obj.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dialogtotal">
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="yt-btn yt-ml8" type="danger" @click="dialogVisible=false">
          {{$t('button.cancel')}}
          </div>
        <div class="yt-btn yt-btn-ys" type="primary" @click="submit">
          {{$t('button.determine')}}
          </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getUserInfoByName } from '@/api/dict/dictValue/index';
  import { queryList, batchIgnore, queryItem, batchUpdateItem, ignoreByDate } from '@/api/management/dailyReportManagement';

  export default {
    name: 'dailyReportManagement',
    data() {
      return {
        ignoreDates: '', // 需要忽略的日报的日期
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
          value: ''
        },
        total: 0,
        obj: {
          page: 1,
          limit: 10
        },
        dialogtotal: 0,
        userList: [],
        list: [],
        selectionList: [],
        dialogForm: { dialogList: [] },
        dialogVisible: false
      };
    },
    methods: {
      ignoreUpdate() {
        if (!this.ignoreDates) {
          this.$notify({
            title: this.$t('tips.fail'),
            message: this.$t('management.dailyReportManagement.tips.selectDate'),
            type: 'warning'
          });
          return;
        }
        this.$confirm(this.$t('management.dailyReportManagement.tips.oneButtonreset'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('tips.determine'),
          cancelButtonText: this.$t('tips.cancel'),
          type: 'warning'
        }).then(() => {
          const dates = [this.ignoreDates]
          ignoreByDate(dates).then(() => {
            this.$notify({
              title: this.$t('tips.success'),
              message: this.$t('tips.preserveSuccess'),
              type: 'success',
              duration: 2000
            });
            this.getList();
          })
        })
      },
      setSales(item) {
        if (this.dictDialogVisible) {
          // 新增
          this.dialogForm.id = item.id
        } else {
          this.listQuery.value = item.value;
        }
      },
      getList() {
        this.listLoading = true;
        queryList(this.listQuery).then(response => {
          this.list = response.data.data.rows;
          this.total = response.data.data.total;
          this.listLoading = false;
        });
      },
      submit() {
        const list = this.dialogForm.dialogList
        if (list && list.length > 0) {
          list.forEach((item, index) => {
            if (item.isIgnoreValue === false) {
              this.$set(list[index], 'isIgnore', '0')
              item.isIgnoreValue = ''
            } else {
              this.$set(list[index], 'isIgnore', '1')
              item.isIgnoreValue = ''
            }
          })
        }
        console.log('list', list)
        batchUpdateItem({ list }).then(() => {
          this.$notify({
            title: this.$t('tips.success'),
            message: this.$t('tips.preserveSuccess'),
            type: 'success',
            duration: 2000
          });
          this.dialogForm = { dialogList: [] }
          this.dialogVisible = false
          this.getList();
        });
      },
      dialoghandleSizeChange(val) {
        this.obj.limit = val;
        this.queryStayDailyNum()
      },
      dialoghandleCurrentChange(val) {
        this.obj.page = val;
        this.queryStayDailyNum()
      },
      update(row) {
        this.obj.stayDailyId = row.id
        this.obj.isIgnore = 0
        // 请求待提交数量弹窗列表
        queryItem(this.obj).then(response => {
          this.dialogForm = row
          this.dialogtotal = response.data.data.total;
          response.data.data.rows.forEach(item => {
            if (item.isIgnore === '0') {
              item.isIgnoreValue = false
            } else {
              item.isIgnoreValue = true
            }
          })
          this.$set(this.dialogForm, 'dialogList', response.data.data.rows)
          this.dialogVisible = true
        });
      },

      handleUpdate() {
        if (this.selectionList.length <= 0) {
          this.$notify({
            title: this.$t('tips.fail'),
            message: this.$t('tips.pleaseChoose'),
            type: 'warning'
          });
          return;
        }
        putObj(this.selectionList).then(() => {
          this.$notify({
            title: this.$t('tips.success'),
            message: this.$t('tips.preserveSuccess'),
            type: 'success',
            duration: 2000
          });
          this.getList();
        });
      },
      handleTotal() {
        if (this.selectionList.length <= 0) {
          this.$notify({
            title: this.$t('tips.fail'),
            message: this.$t('management.dailyReportManagement.tips.selectList'),
            type: 'warning'
          });
          return;
        }
        this.$confirm(this.$t('management.dailyReportManagement.tips.oneButtonreset'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('tips.determine'),
          cancelButtonText: this.$t('tips.cancel'),
          type: 'warning'
        }).then(() => {
          const list = this.selectionList.map(item => item.id)
          batchIgnore(list).then(() => {
            this.$notify({
              title: this.$t('tips.success'),
              message: this.$t('tips.preserveSuccess'),
              type: 'success',
              duration: 2000
            });
            this.getList();
          });
        })
      },
      getUserList(queryString, cb) {
        // 获取员工编号
        getUserInfoByName({ username: queryString }).then(res => {
          const userList = res.data.rows;
          for (let i = 0; i < userList.length; i++) {
            userList[i].value = userList[i].ename;
          }
          cb(userList);
        });
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      handleSelectionChange(val) {
        //  表格序号选中函数
        this.selectionList = val;
      },
      handleFilter() {
        this.getList();
      },
      reset() {
        this.listQuery = { page: 1, limit: 10, value: '' };
        this.getList();
      }
    },
    created() {
      this.getList();
    }
  };
</script>
<style scoped>
</style>
